<template>
  <div class="checkbox-remark">
    <el-checkbox v-model="curValue" :style="{width: labelWidth}" :disabled="disabled" @change="changeCheckboxHandle">{{ label }}</el-checkbox>
    <div class="remark">
      <span :style="{width: remarkLabelWidth}">{{ remarkLabel }}</span>
      <el-input v-if="!disabled" v-model="curRemark" type="textarea" :disabled="disabled" :autosize="{minRows: 1}" :placeholder="placeholder" clearable @change="changeRemarkHandle" />
      <div v-else>{{ curRemark }}</div>
    </div>
  </div>
</template>
<script>
const cr = {
  name: 'CCheckboxRemark',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    remark: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    remarkLabel: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: 'auto'
    },
    remarkLabelWidth: {
      type: String,
      default: 'auto'
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curValue: false,
      curRemark: ''
    }
  },
  watch: {
    value: {
      handler(v) {
        this.curValue = v
      },
      immediate: true
    },
    remark: {
      handler(v) {
        this.curRemark = v
      },
      immediate: true
    }
  },
  methods: {
    changeCheckboxHandle(v) {
      this.$emit('input', v)
    },
    changeRemarkHandle(v) {
      this.$emit('update:remark', v)
    }
  }
}
export default cr
export const crInstall = {
  install(Vue) {
    Vue.component(cr.name, cr)
  }
}
</script>
<style lang="scss" scoped>
.checkbox-remark{
  display: inline-flex;
  align-content: space-between;
  align-items: flex-start;
  &:first-child{
    flex: 0 0 auto;
  }
  .remark{
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    &>span{
      display: inline-block;
      padding-right: 10px;
      text-align: right;
      flex: 0 0 auto;
    }
  }
}
</style>
